<template>
    <div>
        <common-banner
            name="现货库存"
            en-name="Stock List"
            desc="以下所列产品均有现货库存，规格数量不一，大部分产品有充足库存，可满足各个常规规格的出库，也有小部分库存数量有限。如有足够库存，工作日24小时内即可出库，如库存不足，很多产品实验室已在安排补库，交期亦相比定制要保险且快速得多！敬请垂询！"
        ></common-banner>
        <div class="page-center">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="mt-20 mb-20">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/products' }">产品中心</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/project' }">项目列表</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ cate_id ? category.name : '杂质对照品' }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="text-center mt-20 mb-20">
                <el-button plain @click="router.push({ name: 'project' })">点击查看项目列表</el-button>
            </div>
            <div class="mt-20 mb-20">
                <product-list :list="list"></product-list>
            </div>
            <el-pagination background layout="prev, pager, next" :total="100" class="mb-20"></el-pagination>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router/index'
import CommonBanner from '@/components/CommonBanner.vue'
import ProductList from '@/components/ProductList.vue'

const { cate_id } = router.currentRoute.query

// TODO从接口中获取
const list = ref([
    {
        id: 1,
        name: '依托考昔杂质14',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/T18489.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
    {
        id: 2,
        name: '依托考昔杂质15',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/P30406.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
    {
        id: 3,
        name: '依托考昔杂质16',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/P19945.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
    {
        id: 4,
        name: '依托考昔杂质17',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/P19945.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
    {
        id: 5,
        name: '依托考昔杂质18',
        imageUrl: 'http://pro99003c31.pic5.ysjianzhan.cn/upload/P19945.jpg',
        productNo: '4000505016',
        enName: '3001272453',
        productId: 'E02291',
        casNo: '855307-79-8',
        formula: 'C18H13ClN2O2S',
        molecularWeight: '356.82',
    },
])

const category = ref(null)
if (cate_id) {
    // TODO从接口中获取
    category.value = {
        name: '阿德福韦酯',
    }
    document.title = '氘代物，氘代标准品，氘代对照品'
}
</script>

<style lang="scss" scoped>
@media (max-width: 768px) {
    .page-center {
        width: auto !important;
    }
    .breadcrumb {
        margin-left: 10px;
    }
}
</style>
